import { PageContainer } from '@ant-design/pro-components';
import { Chart } from '@antv/g2';
import { Card, Col, Row } from 'antd';
import { useEffect } from 'react';

const cardStyle = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  flexDirection: 'column',
};

export default () => {
  const renderChart = (data, container) => {
    const chart = new Chart({
      container,
      autoFit: true,
      legend: false,
    });

    chart.coordinate({ type: 'theta', outerRadius: 0.8 });

    chart
      .interval()
      .data(data)
      .transform({ type: 'stackY' })
      .encode('y', 'percent')
      .encode('color', 'item')
      .label({
        position: 'outside',
        text: (data) => `${data.item}: ${data.percent * 100}%`,
      });

    chart.render();
  };

  const renderChart2 = (data, container) => {
    const chart = new Chart({
      container,
      autoFit: true,
    });

    chart
      .data(data)
      .encode('x', 'month')
      .encode('y', 'temperature')
      .encode('color', 'city')
      .scale('x', {
        range: [0, 1],
      })
      .scale('y', {
        nice: true,
      })
      .axis('y', { labelFormatter: (d) => d + '°C' });

    chart.line().encode('shape', 'smooth');

    chart.point().encode('shape', 'point').tooltip(false);

    chart.render();
  };

  useEffect(() => {
    const data = [
      { item: '事例一', count: 40, percent: 0.4 },
      { item: '事例二', count: 21, percent: 0.21 },
      { item: '事例三', count: 17, percent: 0.17 },
      { item: '事例四', count: 13, percent: 0.13 },
      { item: '事例五', count: 9, percent: 0.09 },
    ];

    const data2 = [
      { month: 'Jan', city: 'Tokyo', temperature: 7 },
      { month: 'Jan', city: 'London', temperature: 3.9 },
      { month: 'Feb', city: 'Tokyo', temperature: 6.9 },
      { month: 'Feb', city: 'London', temperature: 4.2 },
      { month: 'Mar', city: 'Tokyo', temperature: 9.5 },
      { month: 'Mar', city: 'London', temperature: 5.7 },
      { month: 'Apr', city: 'Tokyo', temperature: 14.5 },
      { month: 'Apr', city: 'London', temperature: 8.5 },
      { month: 'May', city: 'Tokyo', temperature: 18.4 },
      { month: 'May', city: 'London', temperature: 11.9 },
      { month: 'Jun', city: 'Tokyo', temperature: 21.5 },
      { month: 'Jun', city: 'London', temperature: 15.2 },
      { month: 'Jul', city: 'Tokyo', temperature: 25.2 },
      { month: 'Jul', city: 'London', temperature: 17 },
      { month: 'Aug', city: 'Tokyo', temperature: 26.5 },
      { month: 'Aug', city: 'London', temperature: 16.6 },
      { month: 'Sep', city: 'Tokyo', temperature: 23.3 },
      { month: 'Sep', city: 'London', temperature: 14.2 },
      { month: 'Oct', city: 'Tokyo', temperature: 18.3 },
      { month: 'Oct', city: 'London', temperature: 10.3 },
      { month: 'Nov', city: 'Tokyo', temperature: 13.9 },
      { month: 'Nov', city: 'London', temperature: 6.6 },
      { month: 'Dec', city: 'Tokyo', temperature: 9.6 },
      { month: 'Dec', city: 'London', temperature: 4.8 },
    ];

    setTimeout(() => {
      renderChart(data, 'container1');
      renderChart(data, 'container2');
      renderChart(data, 'container3');
      renderChart2(data2, 'container4');
      renderChart2(data2, 'container5');
    }, 0);

    return () => {};
  }, []);

  return (
    <PageContainer>
      <Card>
        <Row gutter={20}>
          <Col span={8}>
            <Card>
              <div style={cardStyle}>
                <div id="container1" style={{ width: '100%' }}></div>
                <h3>考试分数分布</h3>
              </div>
            </Card>
          </Col>
          <Col span={8}>
            <Card>
              <div style={cardStyle}>
                <div id="container2" style={{ width: '100%' }}></div>
                <h3>考试分数分布</h3>
              </div>
            </Card>
          </Col>
          <Col span={8}>
            <Card>
              <div style={cardStyle}>
                <div id="container3" style={{ width: '100%' }}></div>
                <h3>考试分数分布</h3>
              </div>
            </Card>
          </Col>
        </Row>
        <Card style={{ marginTop: 20 }}>
          <div style={cardStyle}>
            <div id="container4" style={{ width: '100%' }}></div>
            <h3>考试分数分布</h3>
          </div>
        </Card>
        <Card style={{ marginTop: 20 }}>
          <div style={cardStyle}>
            <div id="container5" style={{ width: '100%' }}></div>
            <h3>考试分数分布</h3>
          </div>
        </Card>
      </Card>
    </PageContainer>
  );
};
